<template>
  <div class="payment">
    <mt-header title="支付" fixed>
      <router-link to="/" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
    </mt-header>
    <mt-cell title="牙齿矫正费用" to="/Payment" label="2018-04-27 15:30:32" value="288元"></mt-cell>
    <div class="grayrow"></div>
    <div class="hrow">支付方式：</div>
    <mt-radio
      align="right"
      v-model="value"
      :options="options">
    </mt-radio>
    <div class="fqbox" v-if="value=='5'">
      <mt-range v-model="rangeValue" :min="0" :max="3">
        <div slot="start"></div>
        <div slot="end"></div>
      </mt-range>
      <div class="fqbar">
        <div class="fqnum" :class="{active:rangeValue==0}">3期</div>
        <div class="fqnum" :class="{active:rangeValue==1}">6期</div>
        <div class="fqnum" :class="{active:rangeValue==2}">9期</div>
        <div class="fqnum" :class="{active:rangeValue==3}">12期</div>
      </div>
      <mt-cell :title="'每期支付：'+fqcost+'元'" label="包含利息" :value="'每期利息:'+fqint+'元'"></mt-cell>
    </div>
    <mt-tabbar fixed>
      <button class="ok" @click="$cmfdone('支付成功')">确定</button>
    </mt-tabbar>
  </div>
</template>

<script>
  export default {
    name: 'result',
    data () {
      return {
        value: '1',
        rangeValue: 0,
        options:[
          {
            label: '微信支付',
            value: '1',
          },
          {
            label: '支付宝支付',
            value: '2'
          },
          {
            label: '财付通支付',
            value: '3'
          },
          {
            label: 'QQ钱包支付',
            value: '4'
          },
          {
            label: '分期付款',
            value: '5'
          }
        ]
      }
    },
    methods: {
    },
    computed: {
      fqcost:{
        get:function(){
          if(this.rangeValue==0){
            return 100
          }else if(this.rangeValue==1){
            return 55
          }else if(this.rangeValue==2){
            return 40
          }else if(this.rangeValue==3){
            return 35
          }
        }
      },
      fqint:{
        get:function(){
          if(this.rangeValue==0){
            return 4
          }else if(this.rangeValue==1){
            return 7
          }else if(this.rangeValue==2){
            return 8
          }else if(this.rangeValue==3){
            return 11
          }
        }
      }
    },
    watch: {

    }
  }
</script>

